	<template>
	<div class="homeSty">
	 <transition
	 @before-enter="beforeEnter"
	 @enter="enter"
	 @after-enter="afterEnter"
	 >
       <div class="ball" v-show="hiddenFlag"></div>
     </transition>
	 <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<swiper :swiperList="swiperList" :isFull="false" attribute="src"></swiper>
					</div>
				</div>
	  </div>
	 <div class="mui-card">
				<div class="mui-card-header">{{goodsInfo.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<div class="price">
						<p style="display:inline-block;">市场价：<span class="marketPrice">¥{{goodsInfo.market_price}}</span></p>
						<p class="salePrice">销售价：¥{{goodsInfo.sell_price}}</p>
						</div>
						<number-box :maxNum="goodsInfo.stock_quantity" @getNumber="getNumberVal"></number-box>
						<div class="operateBtn">
							<mt-button type="primary" size="small"  style="margin-top: 10px">立即购买</mt-button>
							<mt-button type="danger" size="small"  style="margin-top: 10px" @click="addShopcart">加入购物车</mt-button>
						</div>
					</div>
				</div>
	 </div>
	 <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：{{goodsInfo.goods_no}}</p>
						<p>库存情况：{{goodsInfo.stock_quantity}}</p>
						<p>上架时间：{{goodsInfo.add_time|dateFormat}}</p>
					</div>
				</div>
				<div class="mui-card-footer btnArea">
					<mt-button type="primary" plain size="large" @click="goGoodsDes">图文介绍</mt-button>

					<mt-button type="danger" plain size="large" @click="goGoodsCom" style="margin-top: 10px">商品评论</mt-button>
				</div>
	 </div>
	</div>
	</template>


	<script>
	import comment from '../sub-components/comment.vue'
	import swiper from '../sub-components/swiper.vue'
	import numberBox from '../sub-components/numberBox.vue'
	import {mapState,mapMutations} from 'vuex'
	import {Toast} from 'mint-ui'
	export default{	
	  data(){
	    return{
	      goodsInfo:{},
	      thumbImages:[],
	      thumbNewImages:[],
	      swiperList:[],
	      hiddenFlag:false,
	      newNumberVal:1

	    }
	  },
	  props:["id"],
	  components:{
	  	comment,
	  	swiper,
	  	numberBox
	  },
	  mounted(){
 		this.gePhotoInfo()
	  this.geThumbImg()
	  },
	  created(){
	  	let students=['li','a']
	  	let [s1,...s2]=students
	  	console.log(s1,s2,typeof s2,typeof s1)
	 

	  },
	  methods:{
	    async gePhotoInfo(){
	   	const {data}=await this.$http.get(`/api/goods/getinfo/${this.id}`)
	   	if(data.status===0) {
	   		this.goodsInfo=data.message[0]
	   	}
	   },
	   async geThumbImg(){
	   	const {data}=await this.$http.get(`/api/getthumimages/${this.id}`)
	   	if(data.status===0) {
	   		this.swiperList=data.message
	   		this.thumbImages=data.message
	   		this.thumbImages.forEach((v,i)=>{
	   			var imageObj={
	   				src:v.src,
	   				msrc:v.src,
	   				alt:i,
	   				title:'image'+i,
	   				w:600,
	   				h:400
	   			}
	   			this.thumbNewImages.push(imageObj)
	   		})
	   		console.log(this.thumbNewImages)
	   		
	   	}
	   },
	   addShopcart(){
	   	this.hiddenFlag=!this.hiddenFlag
	   	this.addToCart({
	   		id:this.id,
	   		count:this.newNumberVal,
	   		selected:true,
	   		price:this.goodsInfo.sell_price
	   	})

	   },
	   goGoodsDes(){
	   	this.$router.push('/home/goodsDesc/'+this.id)
	   },
	   goGoodsCom(){
	   	this.$router.push('/home/goodsComment/'+this.id)
	   },
	   //入场动画开始之前，设置小球的起始状态
	   beforeEnter(el){
	   	el.style.transform="translate(0,0)"
	   },
	   //入场动画结束之后，设置小球的终止状态
	   enter(el,done){
	   	const ballPos=el.getBoundingClientRect()
	   	const badgePos=document.getElementById("badge").getBoundingClientRect()
	   	const left=badgePos.left-ballPos.left
	   	const top=badgePos.top-ballPos.top
	   	el.offsetWidth
	   	el.style.transform=`translate(${left}px,${top}px)`
	   	el.style.transition="all 1s cubic-bezier(.46,-0.4,1,.49)"
	   	done()
	   },
	   //入场动画完成之后的回调函数
	   afterEnter(el){
	   		this.hiddenFlag=!this.hiddenFlag
	   },
	   getNumberVal(val){
	   	this.newNumberVal=val
	   	console.log('val',val)
	   },
	   ...mapMutations(["addToCart"])
	 }
}
	</script>

	<style lang="less" scoped>
	.homeSty{
		padding: 10px;
		padding-bottom:50px;
		.newTitle{
			font-size: 22px;
			color:#000;
		}
		.newDetail{
			font-size: 14px;
			color:#26a2ff;
			display: flex;
			justify-content:space-between;
			align-items: center;
		}
		.newContent{
			font-size: 18px;
			color:#ccc;
		}
		.thumbImg{
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-wrap: wrap;
			text-align: center;
			figure{
				display: inline-block;
				width: 30%;
				margin:0!important;
				padding:0!important;
				margin-bottom:10px!important;
				img{
					width: 90%;
				}
			}
		}
		.thumbImg:after{
			content:'';
			width: 30%

		}
		.marketPrice{
			display: inline-block;
			color:#ccc;
			font-size: 14px;
			text-decoration: line-through;
		}
		.salePrice{
			display: inline-block;
			margin-left: 10px;
			color:red;
			font-weight: bold;
			font-size: 18px;
		}
		.btnArea{
			flex-direction: column;
		}
		.ball{
			width: 15px;
			height: 15px;
			background-color: red;
			border-radius: 50%;
			z-index:99;
			position:absolute;
			top:398px;
			left:88px;
			/*transform: translate(150px,223px);*/
		}
	}

	</style>	
